header.navbar {
  /* --flex-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); */
  --flex-navbar-toggler-border-color: rgba(0,0,0,.5);
  --flex-navbar-padding-y: 1rem }

header .nav-link { 
  padding-left: 0 !important;
  padding-right: 0 !important;
  font-weight: bold;
  color: currentColor;
  opacity: 1 !important }

header .nav-link:hover,
header .nav-link:active,
header .nav-link:focus,
header .nav-link.show { color: #000 !important}

header .dropdown-toggle::after {
  margin-left: .5rem;
  opacity: .5
}

@media(min-width:768px){
  header .dropdown-menu {
    box-shadow: 0 0 1rem rgba(0,0,0,.125);
    border: 1px solid #EEE;
    width: 220px !important
  }
}

header .dropdown-item { 
  font-weight: bold;
  white-space: wrap }

header .dropdown-item:hover { 
  color: var(--flex-secondary);
  background: transparent }



@media(max-width:1199.98px){
  .navbar-brand img { height: 40px }

}

@media(max-width:991.98px){

    .navbar-brand img { height: 30px }
  
    header .navbar-collapse { 
      background: var(--flex-primary);
      width: 100%;
      position: fixed;
      z-index: 100000;
      top: 0;
      left: 0  }
  
    header .navbar-nav {
      justify-content: center;
      width: 100%;
      height: 100vh }  
  
    header .nav-link { 
      text-align: center;
      color: #FFF;
      opacity:.5;
      padding: .75rem 3rem !important; 
      width: 100% }

    header a { font-size: 120% !important }
  
    header .nav-link.active,
    header .nav-link:hover,
    header .nav-link:active,
    header .nav-link:focus { 
      opacity:1;
      color: var(--flex-secondary) !important }

    header .dropdown { width: 100% }

    header .dropdown-menu {
      border: 0;
      border-radius: 0;
      width: 100%;
      background-color: rgba(0,0,0,.125) }

    header .dropdown-menu a { 
      text-align: center;
      padding: .5rem 1rem;
      color: #FFF }
}


header .form-control {
  font-size: 100%;
  font-weight: bold;
}

header .form-control::-webkit-input-placeholder { font-weight: normal !important; font-size: 80% !important }
header .form-control::-moz-placeholder { font-weight: normal !important; font-size: 80% !important }
header .form-control:-ms-input-placeholder { font-weight: normal !important; font-size: 80% !important }
header .form-control:-moz-placeholder { font-weight: normal !important; font-size: 80% !important }
header .form-control::placeholder { font-weight: normal !important; font-size: 80% !important }

#hero { background: var(--flex-black) }

#hero,
#hero > *,
#hero > * > *,
#hero > * > * > img,
#hero > * > * > video { height: 100% }

#hero > * > * > img,
#hero > * > * > video {
  width: 100%;
  object-fit: cover }

#hero img,
#hero video { opacity: .5 }

#hero form .form-control {
  background: #EEE;
  font-size: 130%;
  font-weight: bold;
  box-shadow: inset .125rem .125rem .25rem rgba(0,0,0,.0675);
}

#hero form .form-control::-webkit-input-placeholder { font-weight: normal !important; font-size: 80% !important }
#hero form .form-control::-moz-placeholder { font-weight: normal !important; font-size: 80% !important }
#hero form .form-control:-ms-input-placeholder { font-weight: normal !important; font-size: 80% !important }
#hero form .form-control:-moz-placeholder { font-weight: normal !important; font-size: 80% !important }
#hero form .form-control::placeholder { font-weight: normal !important; font-size: 80% !important }

.btn { 
  padding: 1rem 1.5rem;
  font-weight: bold  }
  
.btn-outline-secondary:hover,
.btn-outline-secondary:active,
.btn-outline-secondary:focus { color: var(--flex-dark) !important }

.btn-outline-secondary:hover  {
    color: #FFF !important;
}

.posts .col > article { 
  top: 0;
  transition: all 300ms }

.posts .col > article:hover {
  background: #FFF;
  top: -.5rem;
  box-shadow: 0 0 0 1.5rem rgba(255,255,255,1), 0 .5rem 2rem 1.5rem rgba(0,0,0,0.075)
}

#segments .col .d-flex { 
  position: relative;
  top: 0;
  transition: all 300ms }

#segments .col .d-flex:hover { 
  top:-.25rem;
  box-shadow: 0 1rem 1rem rgba(0,0,0,.05);
}

.brand-group img { 
  transition: all 300ms;
  opacity:.5;
  filter:grayscale(1) }

.brand-group img:hover { 
  opacity: 1;
  filter:grayscale(0) }

#services .col > div,
.box-black { 
  transition: all 300ms;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1) }
  
#services .col > div:hover,
.box-black:hover { 
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2) }

#numbers .bg-primary {
  background: url(img/bg-numbers.webp);
  background-size: cover
}

.custom-carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.carousel-control-prev.custom-carousel-control {
    left: -60px; /* Adjust this value to move further left */
}

.carousel-control-next.custom-carousel-control {
    right: -60px; /* Adjust this value to move further right */
}




.tracking-steps small { min-width: 85px }

.tracking-steps > div:last-child .tracking-item-check:before { height: 50% }

.tracking-steps-disabled { color: #444444 }
.tracking-steps-disabled .icon { fill: #444  }
.tracking-steps-disabled .tracking-item-check:before { background: #444  }
.tracking-steps-disabled .tracking-item-check i { 
  background: var(--flex-black);
  border: .375rem solid #444  }

.tracking-item-check { 
    padding: 1.75rem 0;
    position: relative }

.tracking-item-check:before {
    content: "";
    display: block;
    height: 100%;
    width: .375rem;
    background: var(--flex-success);
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%,0) }

.tracking-steps-disabled .tracking-item:first-of-type .tracking-item-check:before { 
    top: auto;
    bottom: 0;
    height: 50% }

.tracking-steps-disabled .tracking-item:last-of-type .tracking-item-check:before {
    background: linear-gradient(180deg, rgba(68,68,68,1) 75%, rgba(var(--flex-success-rgb,1)) 100%) !important;
}


@media(max-width:767.98px){
    .tracking-item > :nth-child(1) { order: 2 }
    .tracking-item > :nth-child(2) { order: 1 }
    .tracking-item > :nth-child(3) { order: 1 }

    .tracking-item-check { padding: 3rem 0 }

    .tracking-item .icon-48 { width:32px; height: 32px; margin-bottom: .5rem }
    .tracking-item .fs-5 { font-size: 100% !important }
}


.icon {
  display: inline-block;
  position: relative;
}

.icon-16 {
  width: 16px;
  height: 16px;
}

.icon-24 {
  width: 24px;
  height: 24px;
}

.icon-32 {
  width: 32px;
  height: 32px;
}

.icon-48 {
  width: 48px;
  height: 48px;
}

.icon-64 {
  width: 64px;
  height: 64px;
}

.icon-96 {
  width: 96px;
  height: 96px;
}

.icon.text-primary {
  fill: var(--flex-primary);
  color: var(--flex-primary);
}

.icon.text-secondary {
  fill: var(--flex-secondary);
  color: var(--flex-secondary);
}

.icon.text-dark {
  fill: var(--flex-dark);
  color: var(--flex-dark);
}

.icon.text-white {
  fill: #FFF;
}

.icon.text-whatsapp {
  fill: #00D96D;
}